<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">导航</div>

    <div id="container"></div>

    <script>
    // document.createElement()
    // document.createElement方法用来生成元素节点，并返回该节点
    // var newDiv = document.createElement('div');

    var text = document.createElement("p");
    console.log(text);
    
    // document.createTextNode()
    // document.createTextNode方法用来生成文本节点(Text实例)，并返回该节点。它的参数是文本节点的内容
    // var newDiv = document.createElement('div');
    // var newcontent = document.createTextNode('Hello');
    // newDiv.appendchild(newcontent);

    var content = document.createTextNode("我是文本");
    console.log(content);
    
    //appendchild:将内容或者子元素放到容器中
    text.appendChild(content);

    // document.createAttribute()
    // document.createAttribute方法生成一个新的属性节点(Attr实例)，并返回它
    // var attribute = document.createAttribute(name);

    // var root = document.getElementById('root');
    // var it = document.createAttribute('itbaizhan');
    // it.value = 'it';
    // root.setAttributeNode(it);

    var id = document.createAttribute("id");
    id.value = "root"; //通过id.value给id赋值
    console.log(id);

    //setAttributeNode：将id放到标签中
    text.setAttributeNode(id);//把id放到p标签中

    var container = document.getElementById("container");
    // console.log(container);
    container.appendChild(text);
    
    

    </script>
</body>
</html>